<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<style type="text/css">
    body {
        display: flex;
        justify-content: center;
        text-align: center;
        vertical-align: center;
    }

    button {
        width: 200px;
        height: 100px;
    }
</style>
<body>
<div id="container">

</div>
<div>
    <button type="button" id="control">开始</button>
</div>
</body>
</html>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript">
    let voice = {
        localId: '',
        serverId: ''
    };
    let localIds = [];
    let playSeries = [];
    let startNode = $('#control');
    let stopClearTimeOut;

    function addToContainer(localId) {
        let container = $('#container');
        if (localId !== '') {
            container.append("<div><button class='audio-part' type='button' data-id='" + localId + "'>长度50秒</button></div>");
        }
    }

    function playSeriesVoice(localId) {
        playSeries = [];
        let getted = false;
        for (let i = 0; i < localIds.length; i++) {
            if (localIds[i] === localId) {
                getted = true;
            }

            if (getted && localId !== localIds[i]) {
                playSeries.push(localIds[i]);
            }
        }
    }

    function clearTimer() {
        console.log(stopClearTimeOut);
        for (let j = 0; j <= stopClearTimeOut; j++) {
            clearInterval(j);
        }
    }

    function startRecordLocal() {
        voice.localId = "";
        voice.serverId = "";
        wx.startRecord({
            success: function () {
                startNode.text('停止');
            },
            fail: function (re) {

            }
        });

        stopClearTimeOut = setInterval(function () {
            wx.stopRecord({
                success: function (res) {
                    voice.localId = res.localId;
                    addToContainer(res.localId);
                    localIds.push(res.localId);
                    // todo 上传
                }
            });

            wx.startRecord({
                success: function () {
                    // $('#container').append('<h1>sjdhfkjsd</h1>');

                },
                faill: function () {
                    // $('#container').append('<h1>sdfsdfsdf</h1>');
                }
            });
        }, 3000);
    }

    $(document).ready(function () {
        $.ajax({
            url: "http://audioapi.phpcenter.cn/jsconfig",
            method: "get",
            data: {noncestr: "oadpusdpguaPGUDAIDUGIODGiusi", url: window.location.href},
            dataType: "json",
            success: function (res) {
                wx.config({
                    debug: false,
                    appId: res.appId,
                    timestamp: res.timestamp,
                    nonceStr: 'oadpusdpguaPGUDAIDUGIODGiusi',
                    signature: res.sign,
                    jsApiList: ['startRecord', 'stopRecord', 'playVoice', 'uploadVoice', 'onVoiceRecordEnd', 'onVoicePlayEnd']
                });
            },
            error: function (res) {
                console.log(res)
            }
        });

        $('#container').on('click', '.audio-part', function () {
            let localId = $(this).attr('data-id');
            console.log(localIds);
            playSeriesVoice(localId);
            console.log(playSeries);
            wx.playVoice({
                localId: localId
            });
        });

        wx.ready(function () {

            wx.onVoiceRecordEnd({
                complete: function (res) {
                    console.log('complete', res);
                    voice.localId = res.localId;
                }
            });

            wx.onVoicePlayEnd({
                success: function () {
                    let localOne = playSeries.pop();
                    console.log(localOne);
                    if (localOne) {
                        wx.playVoice({
                            localId: localOne
                        });
                    }
                }
            });

            let startNode = $('#control');

            startNode.click(function () {
                if (startNode.text().startsWith('开始')) {
                    startRecordLocal();
                    return;
                }
                if (startNode.text() === '停止') {
                    wx.stopRecord({
                        success: function (res) {
                            clearTimer();
                            startNode.text('开始');
                            voice.localId = res.localId;
                            addToContainer(res.localId);
                            localIds.push(res.localId);
                        },
                        fail: function (res) {
                            console.log(res);
                        }
                    });
                }
            });

            window.onunload = function () {
                // clearTimer();
                return false;
            }
        });
    });

</script>
